<template>
	<view>
		<view class='nav' style='height:150px'>
			<view class='nav-title'>
				<view class="user" @click="login">
					<button class="avatar-wrapper">
						<image class="avatar" :src="avatarUrl"></image>
					</button>
					<view style="margin-top: 55px;">
						{{userName}}
					</view>

				</view>
				<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
					<button @click="tablogin">登录</button>
					<button @click="tabzc">注册</button>
				</uni-popup>
			</view>
		</view>
		<view class="">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item class="grid-item" v-for="(cxb,index) in cxbang" :key="cxb.id">
							<view class="goods-card" v-on:longtap="deletes(index)" :data-index="index">
								<view class="goods-mainpic">
									<image class="goods-image" :src="cxb.Image"></image>
									<view class="goods-sort">{{cxb.sort}}</view>

								</view>
								<view class="goods-name">{{cxb.name}}</view>
								<view class="goods-rank">{{cxb.rank}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>

				</view>
				<view v-if="current === 1">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item class="grid-item">

						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: "/static/tx-logo.png",
				items: ['阅读历史', '我的关注'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#dd524d',
				styleType: 'text',
				cxbang: [],
				userName: '昵称',
				loginif: false
			}
		},
		onChooseAvatar(e) {
			const {
				avatarUrl
			} = e.detail
			this.setData({
				avatarUrl,
			})
		},
		onLoad(e) {
			console.log(e)
			uni.request({
				url: "http://localhost:3000/tab",
				data: {
					"page": 1
				}
			}).then((res) => {
				console.log("asdasd")
				this.cxbang = res.data[0].data
			})
			uni.setStorage({
				key: 'userName',
				data: this.userName,

			})
			uni.setStorage({
				key: 'pic',
				data: this.avatarUrl,
			})

		},
		onShow() {
			uni.getStorage({
				key: 'userName',

			}).then((res) => {
				this.userName = res.data
			});
			uni.getStorage({
				key: 'pic',

			}).then((res) => {
				this.avatarUrl = res.data
			});
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			deletes(e) {
				const goodsData = this.cxbang;
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要删除此漫画吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击确定了');
							goodsData.splice(e, 1);
							console.log(goodsData) //根据数组下标删除长按图片
						} else if (res.cancel) {
							console.log('点击取消了');
							return false;
						}
						this.cxbang = this.goodsData
					}
				})
			},
			login() {
				this.$refs.popup.open('center')
				// uni.navigateTo({
				// 	url:"/pages/login/login"
				// })
			},
			tablogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			tabzc() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			}
		}
	}
</script>

<style>
	.nav {
		width: 100%;
		overflow: hidden;
		position: relative;
		top: 0;
		left: 0;
	}

	.nav-title {
		width: 100%;
		height: 145px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		font-family: PingFang-SC-Medium;
		font-size: 36rpx;
		letter-spacing: 2px;
		background-color: #ff0;
	}

	.user {
		display: flex;
	}

	.avatar-wrapper {
		padding: 0;
		width: 56px;
		border-radius: 30px;
		margin: 40px 10px;
	}

	.avatar-wrapper image {
		display: block;
		width: 56px;
		height: 56px;
	}

	.weui-input {
		margin-top: 55px;
	}

	.grid-item {
		width: 33%;
	}

	.goods-card {
		width: 90%;
		height: 100%;
		margin: 10rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, 0);
		overflow: hidden;
		float: left;
	}

	.goods-mainpic {
		position: relative;
		width: 100%;
		height: 66%;
	}

	.goods-sort {
		font-size: 20rpx;
		color: #eee;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.goods-tag {
		position: absolute;
		top: 0;
		left: 0;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.goods-name {

		width: 150rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		word-break: break-all;
		font-size: 28rpx;
		/* overflow: scroll; */
		color: #000;
	}

	.goods-rank {
		padding: 0px 10rpx;
		font-size: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: wrap;
		/* 将对象作为弹性伸缩盒子模型显示。 */
		display: -webkit-box;
		color: #777;
		/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
		-webkit-box-orient: vertical;
		/* 这个属性不是 css 的规范属性，需要组合上面两个属性，表示显示的行
	    数。 */
		-webkit-line-clamp: 2;
	}

	.popup {
		width: 300rpx;
		height: 500rpx;
	}

	.uni-input {
		margin: 10rpx;
		border: 1px solid #eee;
	}
</style>